<h4>{{title}}</h4>
<form #f="ngForm" novalidate>
  <!-- text -->
  <div class="form-group">
    <label>名字</label>
    <input type="text" class="form-control" name="name" [(ngModel)]="user.name">
  </div>
  <!-- number -->
  <div class="form-group">
    <label>年龄</label>
    <input type="number" class="form-control" name="age" [(ngModel)]="user.age">
  </div>
  <!-- radio -->
  <div class="radio">
    <span>性别：</span>
    <label *ngFor="let gender of genders;" class="radio-inline">
      <input type="radio" name="gender" [(ngModel)]="user.gender"
             [value]="gender.value">
      {{gender.display}}
    </label>
  </div>
  <!-- select基本类型 -->
  <div class="form-group">
    <label>角色</label>
    <select name="role" class="form-control" [(ngModel)]="user.role">
      <option *ngFor="let role of roles" [value]="role.value">
        {{role.display}}</option>
    </select>
  </div>
  <!-- select对象 -->
  <div class="form-group">
    <label>主题</label>
    <select name="theme" class="form-control" [(ngModel)]="user.theme">
      <option *ngFor="let theme of themes" [ngValue]="theme">
        {{theme.display}}
      </option>
    </select>
  </div>
  <!-- Mulit Select -->
  <div class="form-group">
    <label>话题</label>
    <select multiple name="topics" class="form-control" [(ngModel)]="user.topics">
      <option *ngFor="let topic of topics" [value]="topic.value">
        {{topic.display}}
      </option>
    </select>
  </div>
  <!-- Checkbox -->
  <div class="checkbox">
    <label>
      <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
      是否激活
    </label>
  </div>
  <!-- Multi Checkbox -->
  <div class="form-group">
    <span>爱好：</span>
    <label *ngFor="let hobby of hobbies" class="checkbox-inline">
            <input type="checkbox" name="bobby" [value]="hobby.value"
                   [checked]="user.hobbies[hobby.value]"
                   (change)="changeHobby(hobby, $event)" />
            {{hobby.display}}
        </label>
  </div>
  <!-- Cascading Select -->
  <div class="form-group">
    <label>地址</label>
    <select name="province" class="form-control" [(ngModel)]="user.province"
            (change)="changeProvince($event.target.value)">
      <option *ngFor="let province of provinces" [value]="province.pk">
        {{province.pv}}
      </option>
    </select>
    <select name="city" class="form-control" [(ngModel)]="user.city">
      <option *ngFor="let city of cities" [value]="city.ck">{{city.cv}}</option>
    </select>
  </div>
  <button type="submit" (click)="save()" class="btn btn-default">保存</button>
</form>
